import  React from 'react';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
//fetch方法
import { getFirstPage } from '../../fetch/CardList/CardList'

import { getGivingPool } from '../../fetch/CardList/CardList'

import {
    Link
} from 'react-router-dom'


/**
 * 页面首页列表
 */
class  FirstPage extends  React.Component{
    //构造方法
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: [],
            page: 1, //第一页
            limit:20 //每页显示数量
        }
    }

    render() {
        let c=this;
        return (
            <div>
                <div>
                    <WhiteSpace size="md" />
                    {

                        this.state.data.map(function (item) {
                            return (
                                <Link to={"/detail/"+item.givingId}  key= {item.givingId} >
                                <WingBlank size="md" key= {item.givingId} >

                                    <Card>
                                        <Card.Header
                                            title={item.title}
                                            thumb={item.imgUrl==null?"http://202.106.78.3:10001/api-common/file/20171106/filename?flname=40e49f8839264634a1d15964ae1a8161_image-png.jpg":item.imgUrl.split(",")[0]}
                                            extra={<span>捐献者 ：{item.tails.showName}</span>}
                                            thumbStyle={{width:"100px"}}
                                        />
                                        <Card.Body>
                                            <div>{item.bookDesc==null?"这个捐献条目没有描述。。。":item.bookDesc}</div>
                                        </Card.Body>

                                    </Card>

                                </WingBlank>


                                </Link>



                            )})
                    }
                    <WhiteSpace size="md" />
                </div>


                {/*{JSON.stringify(this.state)}*/}
            </div>
        )
    }

    //进行页面的跳转
    OnClickHander(givingId){

         //alert(givingId);
        //browserHistory.push("/about")
    }

    LoadGivinaPool(){
        var biz={biz: '{page: '+this.state.page+',limit: '+this.state.limit+'}'};

        //console.log(biz)
        const result = getGivingPool(biz)
        this.resultHandle(result);

    }

    //用于初始化
    componentDidMount() {
        this.LoadGivinaPool();
        //this.loadFirstPageData();
    }

    // 获取首页数据
    loadFirstPageData() {

        const result = getFirstPage()
        this.resultHandle(result)
    }

    // 处理数据
    resultHandle(result) {
        result.then(res => {
            return res.json()
        }).then(json => {
            const data = json.data
            //console.log(data);
            this.setState(
                  {data : Array.from(data)}
            );
        }).catch(ex => {

        })
    }
}

export  default  FirstPage;